<template>
    <el-container 
      :style="{ height: '100vh', backgroundImage: `url(${currentBackground})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
      <!-- 判断当前路由是否有导航栏和底部 -->
      <template v-if="!noLayout">
        <!-- 顶部导航栏 -->
        <el-header class="header">
            <el-menu
            :default-active="activeMenu"
            mode="horizontal"
            background-color="#409EFF"
            text-color="#fff"
            active-text-color="#ffd04b"
            class="navbar"
          >
            <!-- 首页菜单项 -->
            <el-menu-item index="/">
              <router-link to="/" class="nav-link">首页</router-link>
            </el-menu-item>
            
            <!-- 添加日记菜单项 -->
            <el-menu-item index="/add">
              <router-link to="/add" class="nav-link">添加日记</router-link>
            </el-menu-item>
            
            <!-- 分享菜单项，带有子菜单 -->
            <el-submenu index="/share">
              <template #title>
                <span class="nav-link">main</span>
              </template>
  
              <!-- 子菜单项：分享视频 -->
              <el-menu-item index="/share">
                <router-link to="/share" class="nav-link">分享</router-link>
              </el-menu-item>

              <el-menu-item index="/chatlist">
                <router-link to="/chatlist" class="nav-link">聊天室</router-link>
              </el-menu-item>
  
              <el-menu-item index="/myshare">
                <router-link to="/myshare" class="nav-link">我的分享</router-link>
              </el-menu-item>
            </el-submenu>
  
            <!-- 关于我们菜单项，带有子菜单 -->
            <el-submenu index="/about">
              <template #title>
                <span class="nav-link">关于我们</span>
              </template>
  
              <!-- 子菜单项：团队介绍 -->
              <el-menu-item index="">
                <router-link to="" class="nav-link">项目介绍</router-link>
              </el-menu-item>
              <!-- 子菜单项：发展历程 -->
              <el-menu-item index="">
                <router-link to="" class="nav-link">发展历程</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
          
          <!-- 用户头像和菜单 -->
          <el-dropdown trigger="click" class="user-avatar-menu" append-to-body>
            <span class="el-dropdown-link">
              <el-avatar src="https://th.bing.com/th?id=OIP.VnqbqHI999-VVVkUOWBcMwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2"></el-avatar>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="navigateTo('/profile')">个人信息</el-dropdown-item>
                <el-dropdown-item @click="navigateTo('/settings')">设置</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
      </template>
  
      <!-- 主内容区域 -->
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
  
      <!-- 底部 -->
      <template v-if="!noLayout">
        <el-footer class="footer">
          <div>© 2024 日记 Web 应用 - 保留所有权利</div>
          <div class="footer-links">
            <a href="#" class="footer-link">隐私政策</a>
            <a href="#" class="footer-link">使用条款</a>
          </div>
        </el-footer>
      </template>
    </el-container>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  
  // 当前激活的菜单项
  const activeMenu = ref('/');
  
  // 获取当前路由
  const route = useRoute();
  const router = useRouter();
  
  // 背景图片数组
  const backgroundImages = [
    'https://th.bing.com/th/id/R.211a748643d1ca83bcd3334294f356e8?rik=NWkHmc9SDm9xNA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20110%2f576%2fw1916h1060%2f20190508%2ff6ae-hwsffza7769103.jpg&ehk=d7V%2fww0jjOdGbkeC2cXrZtrb4XPwnAnJzGh5XGR0Elc%3d&risl=&pid=ImgRaw&r=0',
   'https://th.bing.com/th?id=OIP.sa-M7wqyY2-Q03SyYK8J3gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2',
 'https://pcs4.clubstatic.lenovo.com.cn/data/attachment/forum/201905/18/173221cffmrlzrwkvukpyy.png',
   'https://th.bing.com/th?id=OIP.RRkU08KeEPaFe4dS9ldDegHaQD&w=161&h=350&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2',
  ];
  
  let currentIndex = 0; // 当前背景图索引
  
  // 当前背景图片
  const currentBackground = ref(backgroundImages[currentIndex]);
  
  // 每5秒切换背景图片
  const switchBackground = () => {
    currentIndex = (currentIndex + 1) % backgroundImages.length;
    currentBackground.value = backgroundImages[currentIndex];
  };
  
  // 启动定时器
  onMounted(() => {
    setInterval(switchBackground, 60000);
  });
  
  // 判断当前路由是否需要去除布局（如登录和注册页面需要去除导航和底部）
  const noLayout = computed(() => {
    return route.meta.layout === 'auth'; // 如果meta.layout为auth则不显示布局
  });
  
  // 导航到指定路径
  function navigateTo(path) {
    router.push({ path });
  }
  
  // 退出登录
  function logout() {
    // 清除本地存储中的 token 或其他认证信息
    localStorage.removeItem('token');
    // 重定向到登录页面
    router.push({ name: 'LoginPage' });
  }
  </script>
  
  <style scoped>
  /* 全局设置，确保页面布局满屏 */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #app {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* 顶部导航栏样式 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* 保持 el-header 层级较高 */
    height: 60px;
    background-color: #409EFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  
  .navbar {
    justify-content: center; /* 居中显示菜单项 */
  }
  
  .nav-link {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
  }
  
  .nav-link:hover {
    color: #ffd04b;
  }
  
  /* 用户头像样式 */
  .user-avatar-menu {
    margin-left: auto; /* 将头像菜单放在导航栏最右侧 */
  }
  
  .el-avatar {
    cursor: pointer;
  }
  
  .user-avatar-menu .el-dropdown-menu {
    z-index: 1500; /* 确保下拉菜单的层级更高 */
  }
  
  /* 主内容区域样式 */
  .main-content {
    margin-top: 60px; /* 确保内容不与导航栏重叠 */
    margin-bottom: 50px; /* 确保内容不与底部重叠 */
    padding: 20px;
    max-width: 1200px; /* 内容最大宽度 */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: calc(100vh - 110px);
    box-sizing: border-box;
    background-color: #f0f2f5; /* 主内容区域背景 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
  
  /* 底部区域样式 */
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #409EFF;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右分布 */
    padding: 0 20px;
  }
  
  .footer-links {
    display: flex;
  }
  
  .footer-link {
    color: white;
    margin-left: 20px;
    text-decoration: none;
  }
  
  .footer-link:hover {
    color: #ffd04b;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .navbar {
      flex-direction: column; /* 小屏幕时菜单变为垂直布局 */
    }
  
    .main-content {
      padding: 10px; /* 减少主内容区域的内边距 */
    }
  
    .footer {
      flex-direction: column;
      height: auto;
      padding: 10px;
    }
  
    .footer-link {
      margin-left: 0;
      margin-top: 10px;
    }
  }
  </style>
  